<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>Markup Widget Initialization | Kendo UI Getting Started</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Initialize Kendo UI widgets from markup, add Kendo UI frameworks to your application, and use AngularJS or MVVM to configure Kendo UI.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("intro/installation/markup.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//intro/installation/markup.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="markup-widget-initialization"><a href="#markup-widget-initialization">Markup Widget Initialization</a></h1>

<p>In addition to the <a href="/intro/installation/jquery-initialization">jQuery plugin syntax</a>, the Kendo UI widgets might be instantiated based on custom HTML attributes.</p>

<h2 id="overview"><a href="#overview">Overview</a></h2>

<p>You can initialize widgets based on custom HTML attributes in the following ways:</p>

<ul>
<li>
<strong>Option 1</strong> The <a href="/framework/spa/view">View</a> and the <a href="/controls/hybrid/application">mobile Application</a> instantiate widgets based on the <code>role</code> HTML5 <code>data</code> attributes. Both use the <a href="/framework/mvvm/overview">MVVM</a> internally.<br>
</li>
<li>
<strong>Option 2</strong> The <code>kendo.bind</code> method scans the passed DOM element contents for the <code>data-role</code> attributes and instantiates the respective widgets.<br>
</li>
<li>
<strong>Option 3</strong> The Kendo UI <a href="/AngularJS/introduction">AngularJS</a> directives support declarative initialization based on custom element attributes or custom tag names.</li>
</ul>

<blockquote>
<p><strong>Important</strong></p>

<p>The <code>data</code> attribute initialization is not designed to be combined with the Kendo UI server wrappers. The usage of wrappers is equivalent to <a href="/intro/installation/jquery-initialization">jQuery plug-in syntax initialization</a>. To create Kendo UI widget instances through the <a href="/framework/mvvm/overview">MVVM</a> or <a href="/AngularJS/introduction">AngularJS</a> mechanisms, do not use server wrappers for these instances.</p>
</blockquote>

<p>While it is theoretically possible to initialize several different Kendo UI widgets from the same DOM element through the <a href="/intro/installation/jquery-initialization">jQuery plug-in syntax</a>, it is not supported with the declarative initialization from markup.</p>

<blockquote>
<p><strong>Important</strong></p>

<p>It is strongly recommended to initialize the Kendo UI widgets from HTML elements, which are part of the DOM tree. The creation of widgets from <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment">document fragments</a> might cause undesired side effects or lead to JavaScript errors.</p>
</blockquote>

<h2 id="declarative-initialization"><a href="#declarative-initialization">Declarative Initialization</a></h2>

<p>You can declaratively initialize widgets:</p>

<ul>
<li>In <a href="#in-spa-views">Single-Page-Application (SPA) Views</a>.</li>
<li>In the <a href="#in-mvvm">Model-View-ViewModel (MVVM) architectural pattern</a>.</li>
<li>In <a href="#in-hybrid-ui-applications">Hybrid UI Applications</a>.</li>
</ul>

<h3 id="in-spa-views"><a href="#in-spa-views">In SPA Views</a></h3>

<p>The following example refers to a (SPA) View with an AutoComplete widget in the template. For more information on the SPA View, refer to the <a href="/framework/spa/overview">article on building Single Page Applications</a>.</p>

<h6>Example</h6>

<pre><code>    &lt;div id="container"&gt;&lt;/div&gt;
    &lt;script id="index" type="text/x-kendo-template"&gt;
        &lt;div&gt;Hello &lt;input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" /&gt;!&lt;/div&gt;
    &lt;/script&gt;

    &lt;script&gt;
        var index = new kendo.View('index');
        index.render("#container");
    &lt;/script&gt;
</code></pre>

<h3 id="in-mvvm"><a href="#in-mvvm">In MVVM</a></h3>

<p>The following example refers to an MVVM-bound DOM element with an AutoComplete widget.</p>

<h6>Example</h6>

<pre><code>    &lt;div id="container"&gt;
        &lt;div&gt;Hello &lt;input data-role="autocomplete" data-bind="source: source" /&gt;!&lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        kendo.bind($("#container"), {
            source: ['foo', 'bar', 'baz']
        });
    &lt;/script&gt;
</code></pre>

<blockquote>
<p><strong>Important</strong></p>

<p>The <code>data-bind</code> attribute syntax establishes a two-way binding between the widget options—in this case, the Data Source—and the view model field (the <code>source</code>). For more information, refer to the <a href="/framework/mvvm/overview">introductory article on MVVM</a>.</p>
</blockquote>

<h3 id="in-hybrid-ui-applications"><a href="#in-hybrid-ui-applications">In Hybrid UI Applications</a></h3>

<p>The following example refers to a Kendo UI hybrid Application with a View and an AutoComplete widget. For more information about the Hybrid UI applications, refer to the <a href="/controls/hybrid/introduction">article on building hybrid mobile applications</a>.</p>

<h6>Example</h6>

<pre><code>    &lt;div data-role="view" data-model="foo"&gt;
        &lt;div&gt;
        An autocomplete widget
        &lt;input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" /&gt;
        &lt;/div&gt;

        &lt;div&gt;
        A widget bound to the mobile view ViewModel dataSource field
        &lt;input data-role="autocomplete" data-bind="source: dataSource" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var foo = kendo.observable({
            dataSource: ['foo', 'bar', 'baz']
        });

        new kendo.mobile.Application();
    &lt;/script&gt;
</code></pre>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>To configure widgets that are declaratively initialized, you need to be aware of some specifics such as the parsing of the <code>data</code> attributes and the AngularJS directives.  </p>

<h3 id="configuration-The"><a href="#configuration-The">The data Attributes</a></h3>

<p>In addition to the <code>data-role</code> attribute, the declarative initialization parses other <code>data</code> attributes and passes them as configuration options to the widget constructor. For more information on the supported data attributes and on how to bind them to widget events, refer to the <a href="/intro/widget-basics/data-attribute-initialization">section on data attributes</a>.</p>

<h3 id="configuration-AngularJS"><a href="#configuration-AngularJS">AngularJS Directives</a></h3>

<p>The following example refers to the AngularJS directive in the Kendo UI AutoComplete. For more information on the features of the Kendo UI AngularJS directives, refer to the <a href="/AngularJS/introduction">introductory article on AngularJS</a>.</p>

<h6>Example</h6>

<pre><code>
    &lt;div ng-app="myApp"&gt;
        &lt;div ng-controller="MyController"&gt;
            &lt;input kendo-autocomplete k-data-source="dataSource" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var myApp = angular
                        .module("myApp", [ "kendo.directives" ])
                        .controller("MyController", function($scope) {
                          $scope.dataSource = [
                                     'foo', 'bar', 'baz'
                                      ]
                            });
    &lt;/script&gt;

</code></pre>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on getting started with Kendo UI:</p>

<ul>
<li><a href="/intro/installation/getting-started">Get Started with Kendo UI</a></li>
<li><a href="/intro/installation/cdn-service">Kendo UI CDN Services</a></li>
<li><a href="/intro/installation/what-you-need">Include Only What You Need</a></li>
<li><a href="/intro/installation/prerequisites">JavaScript Prerequisites</a></li>
<li><a href="/intro/installation/jquery-initialization">Initialize Widgets Using jQuery Plug-Ins</a></li>
<li><a href="/intro/widget-basics/wrapper-element">Access Widget DOM Elements: wrapper and element</a></li>
<li><a href="/intro/widget-basics/data-attribute-initialization">Set Data Attributes</a></li>
<li><a href="/intro/widget-basics/events-and-methods">Widget Methods and Events</a></li>
<li><a href="/intro/widget-basics/destroy">Destroy Widgets</a></li>
<li><a href="/intro/widget-basics/editing">Edit Widgets</a></li>
<li><a href="/intro/widget-basics/create-custom-kendo-widget">Create Custom Widgets</a></li>
<li><a href="/intro/installation/bower-install">Bower Packages</a></li>
<li><a href="/intro/installation/nuget-install">NuGet Packages</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

